import React, { Component } from 'react'

import { Card, Form, Input, Button, Checkbox, message } from 'antd'

import { LoginWrapper } from './style'

import logo from '@/assets/logo.png'
import { getlogin } from '@/api/user'

import { setToken } from '@/utils/storage'

export default class JKLogin extends Component {
 
  onFinish = async value => {
    try {
      const { agree, mobile, code } = value
      if (!agree) return false

      // 获取login数据
      const { data } = await getlogin(mobile, code)
      // 保存到本地
      // localStorage.setItem('geek_token', data.data.token)
      // console.log(data.data.token);
      setToken(data.data.token)
      // 提示
      message.success('登录成功')
      // 路由跳转到home
      // this.props.history.push('/home')
      console.log(this.props.location)
      if (this.props.location.state) {
        this.props.history.replace(this.props.location.state.from)
      } else {
        this.props.history.push('/home')
      }
    } catch (error) {
      message.error('登录失败')
    }
  }

  render() {
    return (
      <LoginWrapper>
        <div className="login">
          <Card className="login-container">
            <img className="login-logo" src={logo} alt="" />
            {/* 表单 */}
            <Form
              onFinish={this.onFinish}
              name="basic"
              size="large"
              validateTrigger={['onChange', 'onBlur']}
              initialValues={{
                agree: true,
                mobile: '13811111111',
                code: '246810',
              }}
            >
              <Form.Item
                label="手机号"
                name="mobile"
                rules={[
                  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确!' },
                  { required: true, message: '手机号格式不正确!' },
                ]}
              >
                <Input placeholder="请输入手机号" />
              </Form.Item>

              <Form.Item
                label="验证码"
                name="code"
                rules={[
                  {
                    pattern: /^\d{6}$/,
                    message: '验证码格式不对',
                  },
                  { required: true, message: '验证码不能为空!' },
                ]}
              >
                <Input placeholder="请输入验证码" />
              </Form.Item>

              <Form.Item
                name="agree"
                valuePropName="checked"
                rules={[{ required: true, message: '请勾选!' }]}
              >
                <Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" block>
                  登 录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </LoginWrapper>
    )
  }
}
